<!--搜索框组件 -->
<template>
  <!-- 检索 -->
  <div class="searchDetail">
       <!-- 智能检索 -->
    <div class="search-box" >
      <!-- 智能检索 -->
      <div class="search-bar-box">
        <!-- 检索框 -->
        <div class="search-bar">
          <div class="search-inp">
            <el-input
              v-model="searchTxt"
              type="text"
              placeholder="请输入关键词"
              @keyup.enter.native="search({ ipi: 1 })"
            />
          </div>
        </div>
        <span class="search-btn" @click="search({ ipi: 1 })">
          <i class="icon iconfont icon-sousuo"></i>
        </span>
      </div>
    </div>

  </div>
</template>

<script>
import { mapState } from "vuex";
import {
  numFormat,
} from "@/utils/utils";
import { promised, reject } from "q";

export default {
  props: {
    ctNavID: {
      type: String,
    },
    routerName:{
      type: String,
    },
    apiName:{
      type: String,
    },
  },
  data() {
    return {
      activeIndex: 1, // 控制检索类型
      showTips: false, // 控制检索历史记录
      searchTxt: "",// 智能检索 输入框的值
      currentSq: "",
      // 分页
      ipi: 1,
      ips: 10,
      total: 0,
      totalTxt: "",
      sort: [],
      parmAggs: [],
      timeConsuming: "",
      params : {},//接口请求入参全局对象
      screenArrData:[],//左侧选中的分面数据
      isTechObj:{//区分是否为分析业务
        isTech:true,
        routerName:'',
        type:'',
        apiName:'',
      }
    };
  },
  computed: {
    ...mapState(["searchWord","advancedSearchWord", "createSq", "analysisScreen", "analysisChooseScreen"]),
  },
  mounted() {
    this.isTechObj.routerName = this.routerName
    this.isTechObj.type = this.ctNavID
    this.isTechObj.apiName = this.apiName
    this.isTechObj.isTech = true
  },
  watch: {
    // vuex中的变化会引起该变化 除高级检索之外
    searchWord() {
      this.beforeMountFun()
      this.search();
    },
    // vuex中的变化会引起该变化 高级检索
    advancedSearchWord() {
      this.search();
    },
    $route() {
      this.isTechObj.routerName = this.routerName
      this.isTechObj.type = this.ctNavID
      this.isTechObj.apiName = this.apiName
      this.isTechObj.isTech = true
    }
  },
  methods: {
    //搜索事件
    search() {
      this.params = {
        query:this.searchTxt,
      };
      // 耗时
      this.$get(this.apiName, this.params)
        .then((res) => {
          let data = res.data;
          let chartsData = {};
          if (data) {
            chartsData = data || {};
          } else {
            chartsData = {};
          }
          this.$Bus.$emit("techAnalysisData", chartsData);
        })
        .catch((err) => {
          // this.emptyText = "无法找到你所查询的内容，换个关键词试试";
        });
    },
  },

  beforeDestroy() {
    this.$Bus.$off("data");
    this.$Bus.$off("pageSize");
    this.$Bus.$off("currentPage");
    // this.$Bus.$off("changeSort");
    this.$Bus.$off("screenArr");
  },
  components: {
    SearchNav: () =>
      import("./SearchNav.vue"),
    AdvancedSearch: () =>
      import("@/views/modules/DataCenter/components/way/AdvancedSearch.vue"),
    SemanticSearch: () =>
      import("@/views/modules/DataCenter/components/way/SemanticSearch"),
  },
};
</script>

<style lang="scss" scoped>
.searchDetail {
  width: 100%;
  .search-box {
    position: relative;
    // display: inline-flex;
    // flex-wrap: wrap;
    width: 100%;
    // height: 40px;
    // border: 1px solid $mainColor;
    border-radius: 20px;
    margin-bottom: 10px;
    .search-tab {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-left: 12px;
      p {
        position: relative;
        width: 96px;
        line-height: 40px;
        margin: 0;
        text-align: center;
        font-size: 16px;
        color: $color10;
        cursor: pointer;
        &.active {
          font-weight: 600;
          color: $mainColor;
        }
        &:after {
          position: absolute;
          top: 50%;
          right: 0;
          width: 1px;
          height: 20px;
          margin-top: -10px;
          background-color: $color143;
          content: "";
        }
        &:last-of-type {
          &:after {
            content: none;
          }
        }
      }
    }
    .search-bar-box {
      position: relative;
      // border: 2px solid $mainColor;
      border-radius: 30px;
      display: flex;
      .data-source {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 80px;
        height: 100%;
        line-height: 56px;
        text-align: center;
        cursor: pointer;
        &:after {
          position: absolute;
          top: 50%;
          right: 0;
          width: 1px;
          height: 20px;
          margin-top: -10px;
          background-color: $color148;
          content: "";
        }
        .icon {
          display: inline-block;
          width: 20px;
          height: 20px;
          color: $color141;
          background: url(../../../assets/img/PS/data-source-icon.png)
            no-repeat center center;
          background-size: auto 100%;
        }
      }
      .search-bar {
        display: block;
        padding-left: 17px;
        padding-right: 86px;
        height: 50px;
        border-radius: 30px;
        background-color: $color2;
        .search-inp {
          flex: 1;
          line-height: 48px;
          ::v-deep {
            .el-input {
              display: block;
            }
            .el-input__inner {
              border: 0;
            }
          }
          input {
            width: 100%;
            line-height: 40px;
            font-size: 14px;
            border: none;
            outline: none;
          }
        }
      }
      .search-btn {
        position: absolute;
        top: 0px;
        right: 0px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 86px;
        height: 50px;
        border-top-right-radius: 30px;
        border-bottom-right-radius: 30px;
        text-align: center;
        cursor: pointer;
        background-color: $mainColor;
        .icon {
          width: 40px;
          height: 40px;
          line-height: 40px;
          font-size: 28px;
          color: $color2;
        }
      }
      .search-tips-box {
        position: relative;
      }
    }

    .data-source {
      position: relative;
      display: flex;
      width: 48px;
      height: 100%;
      line-height: 40px;
      border-top-left-radius: 30px;
      border-bottom-left-radius: 30px;
      border-left: 2px solid $mainColor;
      border-top: 2px solid $mainColor;
      border-bottom: 2px solid $mainColor;
      text-align: center;
      background-color: #fff;
      cursor: pointer;
      &:after {
        position: absolute;
        top: 50%;
        right: 0;
        width: 1px;
        height: 20px;
        margin-top: -10px;
        background-color: $color142;
        content: "";
      }
      .icon {
        position: relative;
        padding-left: 12px;
        padding-right: 7px;
        font-size: 24px;
        color: $mainColor;
      }
    }
    .search-bar {
      flex: 1;
      display: inline-flex;
      align-items: center;
      flex-wrap: wrap;
      height: 40px;
      border-top: 2px solid $mainColor;
      border-bottom: 2px solid $mainColor;
      background-color: #fff;
      .search-inp {
        position: relative;
        flex: 1;
        height: 40px;
        padding-right: 10px;
        ::v-deep {
          .el-input__inner {
            height: 38px;
            border: 0;
          }
        }
      }
    }
    .tools {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 80px;
      line-height: 100%;
      padding: 1px 10px;
      font-weight: normal;
      .icon {
        display: inline-block;
        width: 18px;
        text-align: center;
        font-size: 18px;
        color: $mainColor;
        cursor: pointer;
        &:hover {
          font-weight: 400;
        }
        &.icon1 {
          // padding-top: 10px;
        }
      }
    }
  }
  .search-tips-box {
    position: relative;
    max-height: 380px;
  }
  > .tools {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 45px;
    .all {
      font-size: 12px;
      color: $color6;
      p {
        display: inline-block;
        &.total-txt {
          span {
            color: $mainColor;
          }
        }
        &.time-consuming {
          display: inline-block;
          margin-left: 10px;
          span {
            display: inline-block;
            margin: 0 4px;
            color: $mainColor;
          }
        }
      }
    }
    .twice-box {
      display: inline-flex;
      align-items: center;
      font-size: 12px;
      overflow: hidden;
      
      padding: 10px 0;
      .toggle {
        display: inline-flex;
        align-items: center;
        cursor: pointer;
        .icon {
          font-size: 20px;
          vertical-align: middle;
          color: $mainColor;
        }
        .label {
          margin-left: 6px;
          margin-right: 18px;
          vertical-align: middle;
          color: $color6;
        }
        .label2 {
          vertical-align: middle;
          color: $color37;
        }
      }
      .twice-inp {
        position: relative;
        width: 220px;
        height: 30px;
        border: 1px solid $color37;
        border-radius: 15px;
        margin-left: 10px;
        background-color: #fff;
        .twice-elinp {
          width: 100%;
          padding-right: 30px;
          border: none;
          border-radius: 15px;
          box-sizing: border-box;
          margin-left: 0;
          background-color: transparent;
          overflow: hidden;
        }
      }
      .enter-btn {
        position: absolute;
        top: 0;
        right: 0;
        width: 30px;
        line-height: 26px;
        text-align: center;
        font-weight: 600;
        font-size: 20px;
        color: $color37;
        cursor: pointer;
      }
      &:hover {
        .icon {
          color: $mainColor;
        }
        .enter-btn {
          color: $mainColor;
        }
      }
    }
    .keywords {
      display: flex;
      align-items: center;
      height: 30px;
      padding: 0 13px 0 15px;
      border: 1px solid $color37;
      border-radius: 3px;
      box-sizing: border-box;
      font-size: 12px;
      .txt {
        margin-right: 14px;
        color: $mainColor;
      }
      .btn {
        font-size: 18px;
        font-weight: 600;
        color: $mainColor;
        cursor: pointer;
      }
    }
  }
}
</style>